<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .bigbox{
        width: 600px;
        height: 600px;
        background-color: aqua;
    }
    .smbox{
        width: 400px;
        height: 400px;
        background-color: blueviolet;
    }
    .xsbox{
        width: 200px;
        height: 200px;
        background-color: black;
    }
</style>
<body>
    <!-- 
    事件捕获、目标元素（事件流）、事件冒泡：
    addEventListener (事件类型，事件处理函数，[true/false])
    true:在捕获阶段处理事件程序
    false:在冒泡阶段处理事件程序，默认值
    事件冒泡：从下到上      false
    事件捕获：从上到下      true
    -->
    <div class="bigbox"><h1>事件流</h1>
<div class="smbox">
    <div class="xsbox"></div>
</div>
    </div>
    <script>
        const xs=document.querySelector('.xsbox');
        //事件对象：事件处理函数中的第一个参数
        xs.addEventListener('click',function(evt){
            console.log(evt.type);      //对象.属性：访问事件对象中的type属性（事件类型）
            console.log(evt.target);    //触发事件的一个元素
            alert('点击了小小盒子');
            evt.stopPropagation();      //阻止传播（冒泡）
        },false);

        const sm=document.querySelector('.smbox');
        sm.addEventListener('click',function(evt){
            alert('点击了小盒子');
            evt.stopPropagation();
        },false);

        const big=document.querySelector('.bigbox');
        big.addEventListener('click',function(evt){
            alert('点击了大盒子');
            evt.stopPropagation();
        },false);

        document.addEventListener('click',function(evt){
            alert('这是文档的响应');
            evt.stopPropagation();
        },false);
    </script>
</body>
</html>